import React from "react";
import {
  InputItem,
  Checkbox,
  Button,
  WhiteSpace,
  Toast,
} from "antd-mobile";
import { http } from "@/utils/request";
import api from "@/utils/api";
import "./index.less";
import { withRouter } from "react-router-dom";
import storage from "@/utils/storage.js";
import { getQueryString } from "@/utils/utils.js";
const CheckboxItem = Checkbox.CheckboxItem;
class Verify extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isResult: false,
      checkState: true,
      amount: "",
      staff: {},
    };
  }
  componentWillMount() {
    let openId = storage.get("openId");
    if (openId) {
      this.getPageMessageByOpenId();
    } else {
      let code = getQueryString("code");
      // 获取 userinfo
      http
        .post(api.getOpenId, {
          code: code || 1,
        })
        .then((res) => {
          let { openId } = res.data;
          storage.set("userInfo", res.data);
          storage.set("openId", openId);
          this.getPageMessageByOpenId();
        });
    }
  }
  // 获取页面信息
  getPageMessageByOpenId = ()=>{
    http.post(api.getProductForWeiXin).then((res) => {
      let feeRate = res.data.feeRate;
      let advanceFlag = res.data.advanceFlag;
      if(advanceFlag == 1){
        this.props.history.replace('previewRecord')
      }
      feeRate = feeRate.split("%")[0];
      this.setState({
        ...res.data,
        staff: res.data.staff || {},
        feeRate,
      });
    });
  }
  onChange = (val) => {
    this.setState({
      checkState: val.target.checked,
    });
  };
  submit = () => {
    let { checkState, id, amount, staff, orderType = "01", amountValue } = this.state;
    if (!checkState) {
      Toast.info("请先勾选用户协议");
      return;
    }
    if (!amount || amount <= 0) {
      return Toast.info("请输入正确预支金额");
    }
    if(amount > amountValue){
      return Toast.info(`最多可预支${amountValue}元`);
    }
    let param = {
      amount,
      inBankName: staff.bankName,
      inAccount: staff.accNo,
      orderType,
      pId: id,
    };

    http
      .postJson(api.newAdvanceOrder, param)
      .then((res) => {
        this.setState({
          isResult: true
        })
      })
      .catch((err) => {
      });
  };
  render() {
    let { feeRate, dayMax, isResult, amount } = this.state;
    return (
      <div className="advance">
        {isResult ? (
          <div>
            <div className="top bgc-fff text-center  ft-30" style={{padding: '1rem'}}>
              <img style={{width:'2rem',marginBottom:'0.4rem'}} src={require('../../images/result.png')}/>
              <p className="ft-bold line-height-2">您的预支申请已提交成功！</p>
              <p>请及时关注审核状态，我们将在3个工作日内</p>
              <p>对您的信息进行审核</p>
            </div>
            <div className="bottom pd-15">
              <Button type="ghost" onClick={()=>{
                this.props.history.push("mine");
              }}>返回我的</Button>
            </div>
          </div>
        ) : (
          <div>
            <div
              className="top"
              style={{ backgroundColor: "#fff", padding: "0.4rem" }}
            >
              <p className="ft-24 ft-bold">预支金额(元)</p>
              <div className="border-bottom-d9">
                <InputItem
                  labelNumber="1"
                  type="number"
                  placeholder="请输入预支金额"
                  value={this.state.amount}
                  onChange={(value) => {
                    this.setState({
                      amount: value,
                    });
                  }}
                >
                  ¥
                </InputItem>
              </div>
              <p className="col-8C8C8C line-height-80">
                最多可预支{this.state.amountValue}元；利率最低至
                {this.state.feeRate}%
              </p>
            </div>
            <WhiteSpace size="lg" />
            <div
              className="content"
              style={{ backgroundColor: "#fff", padding: "0.4rem" }}
            >
              <p className="flex flex-between">
                <span className="col-595959">利率</span>
                <span className="col-8C8C8C">{this.state.feeRate}%</span>
              </p>
              <p className="flex flex-between">
                <span className="col-595959">期限</span>
                <span className="col-8C8C8C">{this.state.dayMax} 天</span>
              </p>
              <p className="flex flex-between">
                <span className="col-595959">到期应还</span>
                <span className="col-8C8C8C">
                  {((feeRate / 100) * dayMax + 1) * (amount || 0)}
                </span>
              </p>
              <p className="flex flex-between">
                <span className="col-595959">收款账号</span>
                <span className="col-8C8C8C">
                  {this.state.staff.bankName} {this.state.staff.accNo}
                </span>
              </p>
            </div>
            <CheckboxItem value={this.state.checkState} onChange={(e) => this.onChange(e)}>
              <p className="col-8C8C8C">
                本人阅读并同意签署
                <span className="col-green">《用户合作协议》</span>
              </p>
            </CheckboxItem>
            <div style={{ padding: "0.4rem" }}>
              <Button type="primary" onClick={this.submit}>
                提交申请
              </Button>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default withRouter(Verify)
